<template>
  <div class="pagecat" :style="{ transform: openDF || openDFL ? 'translate(-340px)' : 'translate(0px)' }">  

    <div ref="mapContainer" style="width: 100%; height: 100vh;"></div>
    <!-- <div id="panel"></div> -->
    <div class="page">

      <a-drawer
        v-model:open="openDwKou"
        class="custom-class"
        root-class-name="root-class-name"
        :root-style="{ color: 'blue' }"
        title="排渣口视频"
        placement="right"
        @after-open-change="afterOpenChange"
      >
      </a-drawer>

      <a-modal v-model:open="openModKou" width="800px" :footer="null" :title="title" @ok="handleOkModKou">
        <iframe src="http://sittest.rybsj.cn/webgis/icc/icc.html?adaptive_page=1" allow="fullscreen" width="100%" height="560px" frameborder="0"></iframe>
      </a-modal>
      

      <drawerForm :open="openDF" :id="editID" :areaType="areaType" :onClose="onClose" 
      :catMap="catMap" :overlays="overlays"
      :updateOverlays="updateOverlays"
      :updateAmenuTopList="updateAmenuTopList"
      :updateLineAndPolyList="updateLineAndPolyList"
       style="pointer-events: all;"></drawerForm>

       <drawerFormLine :open="openDFL" :id="editLineID" :areaType="areaType" :onClose="onCloseLine" :startDrive="startDrive"
      :catMap="catMap" :overlays="overlays"
      :updateOverlays="updateOverlays"
      :updateAmenuTopList="updateAmenuTopList"
      :updateLineAndPolyList="updateLineAndPolyList"
       style="pointer-events: all;"></drawerFormLine>

      <div class="layout">

        <div class="fixedTop">
          <AmenuTop :showDrawer="showDrawer" :showDrawerLine="showDrawerLine"
          :toggleDrawer1="toggleDrawer1"
           :onCloseMenu="onCloseMenu" :updateList="updateAmenuTopListFlag"
            :depTypeChange="depTypeChange"
           ></AmenuTop>

           <!-- @mouseenter="openSelect(this,'selectRef')" -->
            <a-select
                ref="selectRef"
                v-model:value="depType"
                style="width: 120px"
                @change="depTypeChange"
              >
              <a-select-option disabled value="zhengwu" select>交通厅政务</a-select-option>
              <a-select-option disabled value="kakou">交通卡口</a-select-option>
            </a-select>

            
            <!-- @mouseenter="openSelect(this,'selectRef2')" -->
            <a-select
                ref="selectRef2"
                v-model:value="depType2"
                style="width: 120px"
                @change="depTypeChange2"
              >
              <a-select-option value="fengbiallList" select>封闭化园区</a-select-option>
              <a-select-option disabled value="taidapark">泰达停车场</a-select-option>
            </a-select>

            <a-select
              ref="selectRef2"
              v-model:value="depType3"
              style="width: 120px"
              @change="depTypeChange3"
            >
              <a-select-option value="paizhakou" disabled>固废排渣口</a-select-option>
              <a-select-option value="xiaonakou" select>固废消纳口</a-select-option>
            </a-select>
        </div>
        
        <div class="mt-threeframe allH leftlist">

          <a-tabs v-model:activeKey="activeKey" :tabBarStyle="{marginLeft:'1.8em'}">
            <a-tab-pane key="3" tab="车辆列表">
              
              <div class="flexcenter" style="padding: 0 0 0 19px;">
                <div v-show="vehicleList.length < 255">
                  <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate"
                    @change="onCheckAllChange($event,'vehicleList')">
                  </a-checkbox>
                </div>
                <div class="itemTitle special" id="planRoute" @clickxxx="polygonTool">
                  <!-- 待巡查车辆 -->
                </div>
            
              </div>


              <div class="listLimit">
                <div class="lisencelist">
                  <a-checkbox-group v-model:value="checkedIDList">
                    <div class="licensebglist" :class="selectedItemId==item.id?'active':''" v-for="item in vehicleList" :key="item.id">
                      <div class="lisenceitem" @click.stop="toDetail(item, null, 2)">

                        <div class="iteml">
                          <a-checkbox @click.stop :value="item.id" :key="item.id" @change="carCheckChg($event, item,null,null,null, 2)"
                            style="margin-right:7px;" />
                          <div class="flexcenter">
                            <div class="licensePlate">{{ item.plateNo  }}</div>
                          </div>
                        </div>
                        <div class="itemr">102km/h</div>
                      </div>
                    </div>
                  </a-checkbox-group>


                </div>
              </div>
              
            </a-tab-pane>
            <!-- tab="待巡查车辆(警情车辆)" -->
            <a-tab-pane key="1" tab="报警列表">

              <div class="flexcenter" style="padding: 0 0 0 19px;">
                <div v-show="alarmList.length < 255">
                  <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate"
                    @change="onCheckAllChange($event,'alarmList')">
                  </a-checkbox>
                </div>
                <div class="itemTitle special" id="planRoute" @clickxxx="polygonTool">
                  待巡查车辆
                  <!-- <span style="font-size: 12px;">{{ depTypes[currentListType].name }}</span> -->
                </div>
            
              </div>


              <div class="listLimit">

                <div class="lisencelist">
                  <a-checkbox-group v-model:value="checkedIDList">
                    <div class="licensebglist" :class="selectedItemId==item.id?'active':''" v-for="item in alarmList" :key="item.id">
                      <div class="lisenceitem" @click.stop="toDetail(item)">

                        <div class="iteml">
                          <a-checkbox @click.stop :value="item.id" :key="item.id" @change="carCheckChg($event, item)"
                            style="margin-right:7px;" />
                          <div class="flexcenter">
                            <div class="licensePlate">{{ item.plateNo  }}</div>
                            <div class="ltags">
                              <div class="tag" v-if="item.localVehicle.show">本地</div>
                              <div class="tag red" v-if="item.illegalParking.show">违停</div>
                              <div class="tag orange" v-if="item.viaVehicle.show">过境</div>
                            </div>
                          </div>
                        </div>
                        <div class="itemr">102km/h</div>
                      </div>
                    </div>
                  </a-checkbox-group>


                </div>
              </div>
              
            </a-tab-pane>
            <a-tab-pane key="2" tab="电子围栏">
              
              <div style="margin-left:1.8em">
                <mapFence :overlays="overlays" :catMap="catMap" 
                :updateOverlays="updateOverlays"
                :updateAmenuTopList="updateAmenuTopList"
                :updateList="updateLineAndPolyListFlag"
                ></mapFence>
              </div>
              
            </a-tab-pane>
          </a-tabs>

        </div>
        <div class="mt-threeframe allH centerview">

          <div class="cTopdata">

            <div class="dataitem2">
              <numbersplit :number=32 :cornerClasses="[false,false,true,true]"></numbersplit>
              <div class="name" id="illegalParking" @click="mapShowTypeList($event,'illegalParking.show')">违停车辆</div>
            </div>

            <div class="dataitem3">
              <numbersplit :number=683 :cornerClasses="[true,true,false,false]"></numbersplit>
              <div class="name" id="viaVehicle" @click="mapShowTypeList($event,'viaVehicle.show')" style="text-align: right;">过境车辆</div>
            </div>
          </div>

          <drawerMenu
            ref="drawerMenuRef"
            :showDrawer="showDrawer"
            :showDrawerLine="showDrawerLine"
          ></drawerMenu>
          
          <drawerMenuRight
            ref="drawerMenuRef2"
            :showDrawer="showDrawer"
            :showDrawerLine="showDrawerLine"
          ></drawerMenuRight>
          

          <div class="alu centerBt">
            <div class="datafather">

              <div class="dataitem1">
                <div>
                  <div class="name" @click="mapShowTypeList($event,'vehicleType')">辖区总车辆</div>
                  <numbersplit :number=1783></numbersplit>
                </div>
                <div>
                  <div class="name" id="vtype3" @click="mapShowTypeOtherList">危险品运输</div>
                  <numbersplit :number=834></numbersplit>
                </div>
                <div>
                  <div class="name" id="vtype4" @click="mapShowTypeOtherList">客车(两类客车)</div>
                  <numbersplit :number=172></numbersplit>
                </div>
                <div>
                  <div class="name" id="vtype5" @click="mapShowTypeOtherList">重型货车</div>
                  <numbersplit :number=2124></numbersplit>
                </div>
              </div>

              <div class="thistips">
                <div class="itemtip">
                  <div class="abitbg bitred"></div>
                  <div class="tip">违停车辆</div>
                </div>
                <div class="itemtip">
                  <div class="abitbg bitblue"></div>
                  <div class="tip">过境车辆</div>
                </div>
                <div class="itemtip">
                  <div class="abitbg bitwhite"></div>
                  <div class="tip">其他车辆</div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="mt-threeframe allH rightechart">

          <div class="riitem1">
            <div class="echatitem">
              <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
            </div>
          </div>


          <div class="riitem1">
            <div class="echatitem">

              <div class="itemTitle">车辆入境次数排名</div>

              <div class="rankingList">
                <div>
                  <div class="ranking">1</div>
                </div>
                <div class="licensePlate">宁AC7803</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="121" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">2</div>
                </div>
                <div class="licensePlate">宁AC7830</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="109" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">3</div>
                </div>
                <div class="licensePlate">宁AC7835</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="106" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">4</div>
                </div>
                <div class="licensePlate">宁AC8071</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="97" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">5</div>
                </div>
                <div class="licensePlate">宁AC8203</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="95" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">6</div>
                </div>
                <div class="licensePlate">宁AC8291</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="94" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">7</div>
                </div>
                <div class="licensePlate">宁AC8712</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="92" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">8</div>
                </div>
                <div class="licensePlate">宁AC8351</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="92" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>
              <div class="rankingList">
                <div>
                  <div class="ranking">9</div>
                </div>
                <div class="licensePlate">宁AC8573</div>
                <div class="flexcenter" style="padding-bottom: 3px;"><a-progress :percent="92" :size="6"
                    strokeLinecap="butt" trailColor="#3F5AC1" strokeColor="#4487CC" status="active" /></div>
              </div>


            </div>
          </div>


          <div class="riitem1 plan">
            <div class="itemTitle special special2">车辆违停次数比</div>
            <div class="echatitem">
              <div ref="piechartContainer" style="width: 100%; height: 100%;"></div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
// 组件
import numbersplit from '../components/numbersplit.vue'
import drawerForm from '../components/drawerForm.vue'
import drawerFormLine from '../components/drawerFormLine.vue'
import AmenuTop from '../components/AmenuTop.vue'
import drawerMenu from '../components/drawerMenu.vue'
import drawerMenuRight from '../components/drawerMenuRight.vue'
import mapFence from '../components/mapFence.vue'
import aTreeListCar from '../components/aTreeListCar.vue'
import { useMap, selectedItemId } from './useMap.js'
import {lineChart, pieChart} from './useChart.js'


// 其他
import { message } from 'ant-design-vue';
import api from '@/api/index.js'
import { setCookie, getNestedField, api_get } from '../untils/common.js'
import localJsonDataList from '../static/localData/vehicleList.js'

import { ref, onMounted, onBeforeUnmount, getCurrentInstance, watch, computed } from 'vue';

import surveillance_camera from '../assets/surveillance-camera.gif'

const instance = getCurrentInstance();

const drawerMenuRef = ref(null);
const drawerMenuRef2 = ref(null);

const activeKey = ref('1');
const depType = ref('交通厅卡口');
const depType2 = ref('封闭化园区');
const depType3 = ref('固废消纳口');
const selectRef = ref(null);
const selectRef2 = ref(null);
const openDF = ref(false);
const openDFL = ref(false);
const areaType = ref(null);
const editID = ref(0);
const editLineID = ref(0);
const openModKou = ref(false);

const showModalKou = () => {
  openModKou.value = true;
};
const handleOkModKou = e => {
  console.log(e);
  openModKou.value = false;
};

const showDrawer = (id, type) => {
  openDF.value = true;
  openDFL.value = false;
  if (type) {
    areaType.value = type;
  }
  if (id) {
    // id变化后, 在表单props.id监听执行
    editID.value = id;
  } else {
    editID.value = 0
    console.warn('未传id')
  }
};
const onCloseMenu = () =>{
  drawerMenuRef.value.onCloseMenu()
}
const toggleDrawer1 = () =>{
  drawerMenuRef.value.toggleDrawer1()
}

const showDrawerLine = (id, type) => {
  openDFL.value = true;
  openDF.value = false;
  if (type) {
    areaType.value = type;
  }
  if (id) {
    // id变化后, 在表单props.id监听执行
    editLineID.value = id;
  } else {
    editLineID.value = 0
    console.warn('未传id')
  }
};

// 改为hover,但是无法完全实现, 是在不行去掉, 现在先做别的
const openSelect = (ref, itname) => {
  const selector = ref?.$el.querySelector('.ant-select-selector');
  if (selector) {
    const event = new MouseEvent('mousedown', {
      bubbles: true,
      cancelable: true,
      view: window,
    });
    selector.dispatchEvent(event);

    const dropdown = document.querySelector('.ant-select-dropdown');
  
    if (dropdown) {
      // 检查是否已经绑定了事件
      if (!dropdown.dataset.mouseLeaveBound) {
        // 绑定事件
        dropdown.addEventListener('mouseleave', ()=>{
          selector.dispatchEvent(event);
        });
        // 设置标记，表示已经绑定过该事件
        dropdown.dataset.mouseLeaveBound = 'true';
      } else {
        console.log('mouseleave event is already bound to this element.');
      }
    }
  }
  
};

const depTypes = ref({
  ningdongList: {
      name:"宁东镇",
      data:[]
  },
  fengbiallList: {
      name:"封闭化园区",
      data:[]
  },
  paizhakou: {
      name:"固废排渣口",
      data:[]
  },
  xiaonakou: {
      name:"固废消纳口",
      data:[]
  },
  zhengwu: {
      name:"zhengwu",
      data:[]
  },
  kakou: {
      name:"kakou",
      data:[]
  },
  taidapark: {
      name:"taidapark",
      data:[]
  },
})

const currentListType = ref('fengbiallList')
const depTypeChange = (val) => {
  currentListType.value = val
  Object.values(markers).forEach(marker => {
    marker.hide()
  })
  if (depTypes.value[val])
    alarmList.value = depTypes.value[val].data
    depType.value = depTypes.value[val].name
};

const depTypeChange2 = (val) => {
  currentListType.value = val
  // Object.values(markers).forEach(marker => {
  //   marker.hide()
  // })
  // if (depTypes.value[val])
  //   vehicleList.value = depTypes.value[val].data
  //   depType2.value = depTypes.value[val].name
};

const openDwKou = ref(false);
const afterOpenChange = bool => {
  console.log('openDwKou', bool);
};
const showDrawerKouVideos = () => {
  openDwKou.value = true;
};


const depTypeChange3 = (val) => {
  currentListType.value = val
  addMarker()
};

// 地图显示marker点)可点击该点视频查看, 同时列表显示固废列表
let markerKouList = [
  {
    "ID": 7,
    name:'渣口1',
    "longitude": 107.03253799999999,
    "latitude": 37.992743999999995,
    "SimCard": "16200135964",
    "IDNO": "016200135964",
    "ChnName": "CH1,CH2,CH3,CH4",
    "VehiColor": "blue",
    "VehiCompany": "宁夏和宁化学有限公司",
  },
  {
    "ID": 8,
    name:'渣口2',
    "longitude": 111.816435,
    "latitude": 37.175753,
    "SimCard": "16200135964",
    "IDNO": "016200135964",
    "ChnName": "CH1,CH2,CH3,CH4",
    "VehiColor": "blue",
    "VehiCompany": "宁夏和宁化学有限公司",
  },
  {
    "ID": 9,
    name:'渣口3',
    "longitude": 114.777693,
    "latitude": 38.09881,
    "SimCard": "16200135964",
    "IDNO": "016200135964",
    "ChnName": "CH1,CH2,CH3,CH4",
    "VehiColor": "blue",
    "VehiCompany": "宁夏和宁化学有限公司",
  },
], markerKous = []

// 实例化点标记
function addMarker() {
  markerKouList.forEach((val,index)=>{
    
    if (!markerKous['icon_'+index]) {
      console.log([val.longitude, val.latitude],'[val.longitude, val.latitude]');
      markerKous['icon_'+index] = new AMap.Marker({
        // icon: surveillance_camera,
        position: [val.longitude, val.latitude],
        offset: new AMap.Pixel(-13, -30),
        content:`
        <div><img class="markerlnglat" src="${surveillance_camera}"><span class="marker kou">${val.name}</span></div>
        `
      });
      markerKous['icon_'+index].on('click', () => {
        showModalKou()
      })
      catMap.value.add(markerKous['icon_'+index]);
    }
  })
  
  let paddings = [160,200,600,600].map(val=>val*=.9)
    catMap.value.setFitView(Object.values(markerKous),false,paddings)
}

const onCloseLine = () => {
  openDFL.value = false;
};
const onClose = () => {
  openDF.value = false;
};


const mapContainer = ref(null);
const chartContainer = ref(null);
const piechartContainer = ref(null);
const alarmList = ref([]);
const vehicleList = ref([]);
const pointsList = ref([]);

lineChart(chartContainer)
pieChart(piechartContainer)

var styleOptions = {
    strokeColor:"red",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式，solid或dashed。
}

var overlaycomplete = function (e) {
  var geometric = e.obj;
  var strPoints = "";
  var points = []
  if (geometric.CLASS_NAME === "AMap.Polygon" || geometric.CLASS_NAME === "Overlay.Polygon") {
      var path = geometric.getPath(); // 获取折线或多边形的路径数组
      var sep = "";
      for (var i = 0; i < path.length; i++) {
        var pt = path[i];
        strPoints += sep + pt.lng + "," + pt.lat;
        sep = ";";
        points.push([pt.lng,pt.lat])
      }
      console.log(strPoints,'strPoints')
      console.log(points,'points')
    }
};



// init something
setCookie('currUserInfo', '909769f0fba4429bb0cbbae6a0a1e1df2099_2099', 7);

// selectedItemId; // 保存当前选中的 item 的 id
window.currentItem; // 当前选中的 item

// 当 list 更新时，查找并更新 currentItem
const updateSelectedItem = () => {
  console.log(selectedItemId.value);
  if (selectedItemId.value) {
    // 通过 id 查找更新后的 item
    const updatedItem = alarmList.value.find(item => item.id === selectedItemId.value);
    console.log('当前更新的车牌',updatedItem['plateNo']);
    if (updatedItem) {
      window.currentItem = updatedItem; // 更新当前选中的 item
      
      if (window.bMapInfoWindow && window.bMapInfoWindow.getIsOpen()) {
        let vehicle = updatedItem
        let position = [vehicle.longitude, vehicle.latitude]
        if (vehicle)
        createCustomMarker(createInfoWindowContent(vehicle), position, vehicle, true, false);
      }
      
    }
  }
};

/**
 * 
                <!-- 
                {
    "carNumber": "宁AK8381",
    "carTypeName": "固定车A",
    "checkInTime": "2024-08-26 18:07:30",
    "checkOutTime": null,
    "createTime": "2024-08-26T18:07:36",
    "id": 7837,
    "parkingAreaName": "北部区域",
    "photoPathIn": "null",
    "photoPathOut": "null",
    "recordInName": "北部入口1",
    "recordOutName": "null"
}
                -->

                {
                    "attributes": {},
                    "checked": false,
                    "children": [],
                    "describe": "016200134683",
                    "iconCls": "0",
                    "id": "z6",
                    "leaf": null,
                    "pid": "2",
                    "state": "close",
                    "text": "灰口-001"
                }
 */
const fetchVehicleList = async () => {
  const response = await api_get('/webgis/applet/getTdparkList.action', { cors: true });
  
    if (response.data.success) {
      console.log(response.data);
      const localVehicleStatus = Math.random() < 0.5;  // 随机生成 localVehicle 状态
      vehicleList.value = response.data.data.map(item=>{
        return {
          ...item,
          plateNo: item.carNumber,
          locationUpdateTime :item.locatingTime,
          title: item.parkingAreaName,
          localVehicle: { show: localVehicleStatus },
          viaVehicle: { show: localVehicleStatus ? false : Math.random() < 0.5 },
          illegalParking: { show: localVehicleStatus ? Math.random() < 0.5 : Math.random() < 0.5 },
          vehicleType: 'vtype6',
          longitude: item.lng,
          latitude: item.lat,
        }
      })

      
      
    }
}
fetchVehicleList()

// 列表
const fetchLicensePlate = async (isTimerLoop) => {
  if (window.bMapInfoWindow && !isTimerLoop)
    window.bMapInfoWindow.hide()
  const response = await api_get('/webgis/applet/getVecGpsList.action', { cors: true }, '请求Gps数据失败');

  if (response) {
    // 处理成功的响应
    console.log(response.data);
    if (response.data.success) {
      alarmList.value = handleList(response.data.data.ningdongList)
      depTypes.value.ningdongList.data = alarmList.value
      depTypes.value.fengbiallList.data = handleList(response.data.data.fengbiallList)

      updateSelectedItem()
    }

    function handleList(list){
      return list.map((val,idx)=>{
        // 确保当 idx 超过 localJsonDataList 长度时，依然合并数据
        const localData = idx < localJsonDataList.length 
          ? { ...localJsonDataList[idx] }  // 创建 localJsonDataList 的副本
          : { ...localJsonDataList[localJsonDataList.length - 1] };  // 创建最后一项的副本

        // 根据条件动态生成字段
        const localVehicleStatus = Math.random() < 0.5;  // 随机生成 localVehicle 状态
        localData.localVehicle = { show: localVehicleStatus };
        localData.viaVehicle = { show: localVehicleStatus ? false : Math.random() < 0.5 };
        localData.illegalParking = { show: localVehicleStatus ? Math.random() < 0.5 : Math.random() < 0.5 };
        localData.vehicleType = 'vtype' + (Math.random() < 0.3 ? '3' : (Math.random() < 0.6 ? '4': '5'));

        // 合并数据，并确保新对象不影响原始数据
        val.plateNo = val.LICENSE_PLATE;
        val.id = val.ID;
        val.locationUpdateTime = val.LOCATING_TIME;
        val.longitude = val.LONGITUDE;
        val.latitude = val.LATITUDE;

        return Object.assign(localData, val);  // 合并并返回新的对象
      })
    }

    console.log(alarmList.value,'vehicleList.value');
    setTimeout(()=>fetchLicensePlate(true), 50000);
  }
  
  // vehicleList.value = localJsonDataList
  pointsList.value = alarmList.value.map(val=>{
      return { weight: 1, lnglat:[val.longitude,val.latitude], "name": '1',...val}
  })
}



var markers = {}
var overlays = ref({})
let catMap = ref({})

let { mapInstance, createCustomMarker,updateCustomMarker,createInfoWindowContent, toDetail} = useMap(mapContainer,markers, overlays, pointsList)
catMap = mapInstance

const checkedIDList = ref([]);
const indeterminate = ref(false);
const checkAll = ref(false);

const updateAmenuTopListFlag = ref(null);
const updateLineAndPolyListFlag = ref(null);

let updateOverlays = (overlays)=>{
  overlays.value = overlays
}

let updateAmenuTopList = ()=>{
  updateAmenuTopListFlag.value = Math.random()+""
}

let updateLineAndPolyList = ()=>{
  updateLineAndPolyListFlag.value = Math.random()+""
}


// 全选
let onCheckAllChange = (e, field) => {
  let list
  if (field == 'alarmList') {
    list = alarmList.value
  } else if (field == 'vehicleList') {
    list = vehicleList.value
  }
  checkedIDList.value = []
  if (e.target.checked) {
    checkedIDList.value = list.map(item => item.id)
    catMap.value.setFitView(Object.values(markers).splice(3));
  } else {
    Object.values(markers).forEach(marker => {
      marker.hide()
    })
  }

  const checkedIDSet = new Set(checkedIDList.value);

  for (let [index, vehicle] of list.entries()) {
    if (checkedIDSet.has(vehicle.id)) {
      let res = vehicle
      let position = [res.longitude, res.latitude]
      if (!markers[vehicle.id + '_icon']) {
        createCustomMarker(createInfoWindowContent(res), position, vehicle, false);
      } else {
        markers[vehicle.id + '_icon'].setPosition(position)
        markers[vehicle.id + '_icon'].show()
      }
    }
  }
  indeterminate.value = false;
};



/**
 * 
 * @param {*} checkedValues 
 * @param {*} item 
 * @param {*} showModal 
 * @param {*} updateIcon 
 * @param {*} multiple 
 * 2024年8月20日：太杂
 */
// 单击车牌和单选复选框；相同类型车辆（危运，重货等）循环触发显示
// 单选
let carCheckChg = (checkedValues, item, showModal = true, updateIcon = '', multiple = false, templateID) => {
  let checked = checkedValues.target.checked
  // window.bMapInfoWindow&&window.bMapInfoWindow.hide()
  // setTimeout(() => {
    //  关闭后, 本身逻辑是要勾选多个地图显示多个的就不对了
    // 关闭所有窗口
    // Object.values(markers).forEach(marker => {
    //   marker.hide()
    // })

    // 对选中的车操作
    let position = [item.longitude, item.latitude]
      // marker和infowindow经纬度有车会对不上 TODOOOOOOOOO

    // 尝试创建点和窗口;根据配置尝试显示点和窗口
    if (!multiple)
      window.currentItem = item

    createCustomMarker(createInfoWindowContent(item, templateID), position, item, false, multiple);
    updateIcon && updateCustomMarker(item, updateIcon)
    // setTimeout(() => {
      if (checked) {
        if (showModal) {
          window.bMapInfoWindow.show()
          catMap.value.setZoomAndCenter(18, position)
        }
        // 刷新数据变更导致图标show不出来,不显示
        markers[item.id + '_icon'] ? markers[item.id + '_icon'].show() : ''
      } else {
        window.bMapInfoWindow.hide()
        markers[item.id + '_icon'] ? markers[item.id + '_icon'].hide() : ''
      }
    // }, 0)

    if (checkedIDList.value.length == 1) {
      catMap.value.setCenter([item.longitude, item.latitude])
    }
   
    if (window.bMapInfoWindow.getIsOpen()) {
      if (!multiple) 
        catMap.value.panBy(0, 100);
    }

  // }, 0)
};

let mapShowTypeData = (e, sameList) => {
  if (window.bMapInfoWindow)
    window.bMapInfoWindow.hide()

  if (alarmList.value.length>=255) {
    message.info('车辆过多，为避免地图造成卡顿，暂不显示')
    return
  }

  Object.values(markers).forEach(marker => {
    marker.hide()
  })

  checkedIDList.value = sameList.map(item => item.id)

  sameList.forEach(item=> {
    carCheckChg({ target: { checked: true, value: item.id } }, item, false, e.target.id, true);
  })
  // map.add后处理 //最终结果：给相同类型车辆marker设置地图合适大小
    let fitMarkers = checkedIDList.value
    .filter(id => markers[id+'_icon'] != undefined)
    .map(id => {
      return markers[id+'_icon']
    })

    let paddings = [160,200,400,400].map(val=>val*=.9)
    catMap.value.setFitView(fitMarkers,false,paddings)
}

let mapShowTypeList = (e,field) => {
  let sameList = alarmList.value.filter(item => getNestedField(item,field))
  mapShowTypeData(e, sameList)
}

let mapShowTypeOtherList = (e) => {
  let sameList = alarmList.value.filter(item => item.vehicleType == e.target.id)
  mapShowTypeData(e, sameList)
}

// 开始请求车辆列表
fetchLicensePlate()

// watch(checkedIDList, (newValue) => {
//   const length = newValue.length;
//   checkAll.value = (length === alarmList.value.length);
//   indeterminate.value = length > 0 && length < alarmList.value.length;
// }, { immediate: true });

onMounted(() => {
 
  // 在列表数据变化时列表变化
  // setInterval(() => {
  //   vehicleList.value[0]['offlineTime'] += '1'
  // }, 3333);

});


onBeforeUnmount(() => {
  // window.removeEventListener('resize', resizeChart);
  // if (chart) {
  //   chart.dispose();
  // }
  // if (chart2) {
  //   chart2.dispose();
  // }
});

</script>
<style lang="stylus">
.ant-tree-indent-unit:before,
.ant-tree-show-line
  border-color #516DC9
.ant-tree-show-line .ant-tree-indent-unit:before
  border-color #516DC9
.ant-tree 
  background transparent
  color #516DC9
  font-weight bold
.fixedTop
  position fixed
  top .1rem
  pointer-events auto
  width 98%
  display flex
  align-items center
.ant-menu-light.ant-menu-submenu>.ant-menu,
  background transparent
.fixedTop
  .ant-menu-light
    background transparent
    color #7c96ff
    :hover
      color #7c96ffcf
.ant-menu-light .ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected), .ant-menu-light .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected)
  color #7c96ffcf
</style>
<style>

.marker {
  position: absolute;
  top: 10px;
  right: -78px;
  color: #fff;
  padding: 4px 10px;
  box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
  white-space: nowrap;
  font-size: 12px;
  font-family: "";
  background-color: #25a5f7a8;
  border-radius: 3px;
}
.marker.hiding {
  display: none;
}
.marker.kou {
  right: -58px;
}

#app .amap-icon img {
  user-select: none;
}
.modalDIV {
  width: 500px;
  /* height: 306px; */
  /* overflow-y: auto; */
  cursor: auto;
}
.modalDIV p span:nth-child(2){
  pointer-events: none;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 10px
}

::-webkit-scrollbar-thumb {
  border-radius: inherit;
  background-color: rgba(144, 147, 153, .3);
  -webkit-transition: background-color .3s;
  transition: background-color .3s
}
</style>
<style lang="stylus">
.centerview 
  .ant-menu-inline {
    width auto !important
  }
  .ant-drawer-left>.ant-drawer-content-wrapper {
    box-shadow unset
  }
  .ant-drawer .ant-drawer-content {
    background transparent
  }
  .ant-drawer .ant-drawer-body {
    padding  0;
    padding-top  6em;
  }
:where(.css-19iuou).ant-checkbox-group ,
.ant-checkbox-group {
  display:unset
}
.ant-checkbox .ant-checkbox-inner {
  opacity: 1;
  // background-color: transparent; //使用透明色选中的复选框将不可见
}
.iteml .ant-checkbox .ant-checkbox-inner,
.flexcenter .ant-checkbox .ant-checkbox-inner
{
  background-color: transparent;
  opacity: .45;
}
.listLimit {
  max-height: calc(100% - 24px);
}

.listLimit::-webkit-scrollbar {
    width: 6px
}

.listLimit::-webkit-scrollbar-track {
    border-radius: 10px
}

.listLimit::-webkit-scrollbar-thumb {
    border-radius: inherit;
    background-color: rgba(144,147,153,.3);
    -webkit-transition: background-color .3s;
    transition: background-color .3s
}

.itemTitle.special
  margin-bottom: 0;
  z-index 10;
  margin: 0 0 0 9px;
.itemTitle.special2
  position: relative;
  top: 6px;
.itemTitle
  font-size 16px
  margin 0 0 .5rem 15px
  font-weight bold
.riitem1:not(.plan)
  background url(../static/images/shyou.png) center top / contain no-repeat
  ,url(../static/images/zuoxia.png) center bottom / contain no-repeat
.riitem1:nth-child(1)
    margin-bottom 15px
.riitem1
  height 28vh
  .echatitem:not(:nth-child(2)) 
    padding-top 10px
  .echatitem
    height 100%
    overflow hidden
    .rankingList
      width 90%
      margin 0 auto 2px auto
      display flex
      align-items center
      .ranking
        font-size 12px
        width 18px;
        height 18px;
        display flex
        justify-content center
        font-weight bold
      .licensePlate
        white-space nowrap
        color #3F5AC1
        font-size 13px
      >div:not(:nth-child(3))
        margin-right 15px
      >div:nth-child(3)
        width 100%

    .rankingList:nth-child(2) .ranking,
    .rankingList:nth-child(3) .ranking,
    .rankingList:nth-child(4) .ranking

        color white
        background #BC5450;
        border-radius 50%;
.dataitem2
  margin 12px 0 0 25px
.dataitem3
  margin 12px 28px 0 0
</style>
<style>
.thistips {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 7%;
}

.thistips .itemtip {
  display: flex;
  align-items: center;
}

.itemtip .tip {
  font-size: 10px;
}

.itemtip .abitbg {
  width: 5px;
  height: 5px;
  margin-right: 3px;
}

.bitred {
  background: #BC5450;
}

.bitblue {
  background: #4791E9;
}

.bitwhite {
  background: #fef;
}
</style>
<style lang="stylus">

.numberEL 
  position relative
  font-size 29px
  letter-spacing: 5px
  background rgb(21,40,91)
  border 2px solid #395ab9
  border-radius 2px
  line-height 36px
  color rgb(0,179,255)
  font-weight 500
  font-family emoji
  display inline-block
.numberEL .numberEd:last-child
  padding-right 2px
.dataitem2 .numberEL
  background rgb(96,48,49)
  border 2px solid rgb(150,44,52)
  // border-top-left-radius 13px
  // border-bottom-right-radius 13px
  color white
.dataitem2 .numberEd:not(:last-child)::after
  background-color #6b3f41 
.dataitem2 .name
  color #BC5450
  pointer-events all
  cursor pointer

.dataitem3 .numberEL
  background rgb(90,46,26)
  border 2px solid rgb(175,94,0)
  // border-bottom-left-radius 13px
  // border-top-right-radius 13px
  color white
.dataitem3 .numberEd:not(:last-child)::after
  background-color  rgba(101,59,41,.7) 
.dataitem3 .name
  color #D4742F
  pointer-events all
  cursor pointer

.centerBt
  bottom 0
  width 100%
.datafather {
  display flex
}
.dataitem1 
  display flex
  width 93%
  justify-content space-evenly
  margin-bottom 50px
.name
  pointer-events all
  cursor pointer
  color white
  margin-bottom 4px
  font-family serif
  font-size 14px
  letter-spacing 1px
  font-weight 600
  margin-top 3px
</style>
<style>
@font-face {
  font-family: 'PangMen';
  src: url(../static/fonts/9191.ttf);
}

.layout {
  display: flex;
  min-height: 822px;
  width: 98%;
  margin: auto;
  pointer-events: none;
}

.leftlist {
  padding-left: 6px;
  position: relative;
  width: calc(20% - 2px);
  /* border: 1px solid #eee; */
  background: url(../static/images/topleft.png) center top / contain no-repeat;
  overflow: hidden;
  pointer-events: all;
}

.leftlist .ant-tabs-nav-list{
  overflow-y: auto;
}
.leftlist .ant-tabs .ant-tabs-tab-btn{
  white-space: normal;
  word-break: break-word;
  max-width: 72px;
  min-width: 70px;
  text-align: center;
}

.lisencelist {
 
}

.leftlist .licensebglist.active,
.leftlist .licensebglist:hover {
  background:
    url(../static/images/licensetop.png) left top / contain no-repeat,
    url(../static/images/licensebg.png) left center / contain no-repeat,
    url(../static/images/licensebottom.png) left bottom / cover no-repeat;
    background-size: 100%, 100% 100%, contain;
}

/* @media (max-width:1366px) {
  .leftlist .licensebglist:hover {
    background-size: 100%, 100% 100%, contain;
  }
} */
@media (min-width:1888px) {
  .leftlist .licensebglist.active,
  .leftlist .licensebglist:hover {
  background-size: 345px, contain, contain;
  }
}

.leftlist .lisenceitem {
  width: 82%;
  margin: 0 auto 2px auto;
  display: flex;
  align-items: center;
  padding: 19px 0;
  margin-right: 40px;
  cursor: pointer;
  line-height: normal;
}

.leftlist .lisenceitem .itemr {
  font-size: 13px;
  color: #516DC9;
}

.ant-tabs {
  color: #516DC9;
  height: 100%;
}
#app .ant-tabs .ant-tabs-content {
  height: 100%;
}

.leftlist .lisenceitem .iteml {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.leftlist .lisenceitem .iteml>div:nth-child(1) {
  width: 34px;
  font-size: 12px;
  font-weight: bold;
}

.leftlist .licensebglist:nth-child(1) .iteml>div:nth-child(1),
.leftlist .licensebglist:nth-child(2) .iteml>div:nth-child(1),
.leftlist .licensebglist:nth-child(3) .iteml>div:nth-child(1) {
  color: #fff;
}

.leftlist .lisenceitem .licensePlate {
  font-size: 14px;
  font-weight: bold;
  margin-right: 7px;
  margin-left: 4px;
  font-family: monospace;
  white-space: nowrap;
  color: #3f5ac1;
}

.leftlist .lisenceitem .ltags {
  display: flex;
}

.leftlist .lisenceitem .ltags .tag {
  width: 24px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #4791E9;
  border-radius: 2px;
  font-size: 8px;
  white-space: nowrap;
  margin-right: 5px;
}

.leftlist .lisenceitem .ltags .tag.red {
  background: #C53D5C;
}

.leftlist .lisenceitem .ltags .tag.orange {
  background: #D46A41;
}

.centerview {
  position: relative;
  width: calc(62% - 2px);
  /* border: 1px solid #eee; */
  pointer-events: none;
}

.centerview .cTopdata {
  display: flex;
  justify-content: space-between;
}

.rightechart {
  position: relative;
  width: calc(19.8% - 2px);
  /* border: 1px solid #eee; */
  pointer-events: all;
}

/* .page {  
  width: 100%; height: 100%;
  background-image: url(/src/static/images/bgiframe.png), url(/src/static/images/bgcenter.png);
  background-size: 98% 95%, 59% 85%;
  background-position: center center, center 67%;
  background-repeat: no-repeat, no-repeat;
  min-height: 100vh;  
  min-width: 941px;
  position: absolute;
  top:0;
  pointer-events: none;
} */
.pagecat {
  transition: all .37s
}
.page {
  width: 100%;
  height: 100%;
  background-image: url(/src/static/images/bgiframe2.png), url(/src/static/images/bgcenter.png), url(/src/static/images/maskbg4.png);
  background-size: 98% 95%, 59% 85%, cover;
  background-position: center center, center 67%, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  min-height: 100vh;
  min-width: 941px;
  position: absolute;
  top: 0;
  pointer-events: none;
}

.mapavatar {
  position: relative;
  left: 1px;
  display: flex;
  flex-direction: column;
}

.mapclose {
  position: absolute;
  width: 14px;
  height: 14px;
  cursor: pointer;
  z-index: 99;
  right: -14px;
  top: -8px;
  opacity: .6;
}

.mapplate {
  background: #3F5AC1;
  color: white;
  padding: 0 4px;
  font-size: 13px;
  position: relative;
  white-space: nowrap;
  text-align: center;
}

.mapplate.red {
  background: #C53D5C;
}

.mapsanjiao.red {
  border-top: 5px solid #C53D5C;
}

.mapsanjiao {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #3F5AC1;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
<style>

#app .leftlist .ant-select-selector,
#app .fixedTop .ant-select-selector
 {
  background: unset;
  border: unset;
  height: auto;
}
#app .leftlist .ant-select-single,
#app .fixedTop .ant-select-single
 {
  background: unset;
  border: unset;
  /* width: auto!important; */
  /* min-width: 95px; */
}
#app .leftlist .ant-select .ant-select-arrow,
#app .fixedTop .ant-select .ant-select-arrow
 {
  color: #85a1ef82;
}
.ant-select-dropdown
{
  /* background-color: #8187f7ce; */
  /* display: block!important; */
}

.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: #85a1ef;
}
.fixedTop .ant-select-single.ant-select-open .ant-select-selection-item {
  color: #7c96ff;
}
.fixedTop .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.fixedTop .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
  color: #7c96ff;
}


.ant-progress .ant-progress-inner {
  border-radius: unset;
}

.ant-progress .ant-progress-text {
  color: #646cff;
  font-size: 13px;
}

.ant-progress-line {
  margin-inline-end: unset;
  margin-bottom: unset;
}

/* .ant-progress .ant-progress-text {
  display: none;
}
.ant-progress.ant-progress-show-info .ant-progress-outer {
  margin-inline-end:unset;
  padding-inline-end:unset;
} */
/* 通用 */
.alu {
  position: absolute;
}

.mt-threeframe {
  margin-top: 10vh;
}

.mt-threeframe .name:hover {
  color: dodgerblue;
}

.allH {
  height: 87.3vh;
}</style>